<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>素材管理</title>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <script src="../common/header.js"></script>
    <!-- 内容主体区域 -->
    <div id="LAY_app_body">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <!--检索项-->
                            <div class="layui-form">
                                <div class="layui-inline">
                                    <a href="material_add.html" class="layui-btn layui-btn-sm">添加素材</a>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="createdBy" name="createdBy" lay-verify="createdBy"
                                               placeholder="搜索添加者姓名"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="userName" name="userName" lay-verify="userName"
                                               placeholder="搜索使用者姓名"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <input type="text" id="content" name="content" lay-verify="content"
                                               placeholder="关键字"
                                               autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-input-inline">
                                        <select id="repeat" style="layui-input-inline" onchange="reloadList()">
                                            <option value="">请选择</option>
                                            <option value="0">可重复使用</option>
                                            <option value="1">不可重复使用</option>
                                        </select>
                                    </div>
                                </div>
                                <button class="layui-btn layui-btn-xs" onclick="reloadList();">搜索</button>
                                <button class="layui-btn layui-btn-xs layui-btn-primary" onclick="reloadList(true);">重置</button>
                            </div>
                            <!--表格内容区域-->
                            <table id="LAY-material-group-manage" lay-filter="LAY-material-group-manage"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="headBar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delRecord">删除</button>
    </div>
</script>
<script>
    var getSearchData;
    var reloadList;
    layui.use(['table'], function (table) {
        var $ = layui.$
        table = layui.table

        getSearchData = function () {
            var repeat = $('#repeat').find("option:selected").val();
            var content = $('#content').val();
            var userName = $('#userName').val();
            var createdBy = $('#createdBy').val();
            return {
                repeat: parseInt(repeat),
                userName: userName,
                content: content,
                createdBy: createdBy
            }
        }

        table.render({
            elem: '#LAY-material-group-manage'
            , url: HOST + 'api/v1/materials' //数据接口
            , headers: {Authorization: layui.data("TOKEN").TOKEN}
            , contentType: 'application/json'
            , method: "POST"
            , data: getSearchData()
            , id: "LAY-material-group-manage"
            , page: true //开启分页
            , toolbar: '#headBar'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {type: 'numbers', title: 'ID', fixed: 'left'}
                , {field: 'name', title: '分组名'}
                , {field: 'userName', title: '添加者'}
                , {field: 'atta', title: '分类', templet: '#typeTpl'}
                , {field: 'repeat', title: '重复使用'}
                , {
                    field: 'created_on', title: '添加时间', templet: function (row) {
                        return parseTime(row.created_on)
                    }
                }
                , {field: 'sex', title: '使用者'}
            ]]
            , error: function (err) {
                if (err.code === 20002) {
                    layer.open({
                        type: 1,
                        title: false,//不显示标题栏
                        closeBtn: false,
                        area: '300px;',
                        shade: 0.8,
                        id: 'LAY_layuipro', //设定一个id，防止重复弹出
                        btn: ['重新登录'],
                        btnAlign: 'c',
                        moveType: 1,
                        content: '<div style="padding: 60px 30px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">您的登录信息已失效，请重新登录！</div>',
                        success: function (layero) {
                            var btn = layero.find('.layui-layer-btn');
                            btn.find('.layui-layer-btn0').attr({
                                href: '../login/login.html'
                            });
                        }
                    });
                } else {
                    layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                }
            }
        });

        //监听头工具栏
        table.on('toolbar(LAY-material-group-manage)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var checkStatus = table.checkStatus('LAY-material-group-manage');
            var layEvent = obj.event

            if (layEvent === 'delRecord') {  // 删除素材分组
                if (checkStatus.data.length > 0) {
                    layer.confirm('确认要删除此素材吗？', function (index) {
                        var data = checkStatus.data
                        var param = []
                        data.forEach(e => {
                            param.push(e.id)
                        })
                        service.post('api/v1/materialsdel', {
                            ids: param
                        }).then((response) => {
                            if (response.code === 200) {
                                layer.msg('删除成功', {offset: '45vh', icon: 1, time: 2000});
                                table.reload('LAY-material-group-manage', {
                                    where: getSearchData()//设定异步数据接口的额外参数，任意设
                                    , page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            } else {
                                layer.msg(response.msg, {offset: '45vh', icon: 5, time: 2000});
                            }
                        }).catch((err) => {
                            layer.msg(err.msg, {offset: '45vh', icon: 5, time: 2000});
                        })
                    });
                } else {
                    layer.msg('请先选择要删除的数据', {offset: '45vh', icon: 5, time: 2000});
                }
            }
        });

        reloadList = function (reset, stayPage) {
            if (reset == true) {
                $('#repeat').find('option:first').attr("selected", false);
                $('#repeat').find('option:first').attr("selected", true);
                $('#content').val('');
                $('#userName').val('');
                $('#createBy').val('');
            }
            if (stayPage == true) {
                table.reload('LAY-material-group-manage', {
                    where: getSearchData()
                });
            } else {
                table.reload('LAY-material-group-manage', {
                    where: getSearchData()
                    , page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };
    });
</script>
<script type="text/html" id="typeTpl">
    {{#  if(d.type===1){ }}
    <span>昵称</span>
    {{#  } else if(d.type===2) { }}
    <span>头像</span>
    {{#  } else if(d.type===3) { }}
    <span>朋友圈背景</span>
    {{#  } else if(d.type===4) { }}
    <span>聊天背景</span>
    {{#  } else if(d.type===5) { }}
    <span>自动回复</span>
    {{#  } else if(d.type===6) { }}
    <span>聊天话术</span>
    {{# } }}
</script>
</body>
</html>
